<script setup lang="ts">

import type {APPSetting} from "~/stores/appStore";
import { defineAsyncComponent } from 'vue'
const CodeEditDialog = defineAsyncComponent(() =>
    import('~/components/editor/CodeEditDialog.vue')
)

const {appPageContent,operationConfig,isCommercial} = storeToRefs(useAppStore())
const data={
  enableMultiTask:'启用多任务(可持续点击生成，方便进行多卡测试，正式运行建议禁止',
  home_logo_dark:'Logo-黑暗模式',
  home_logo_light:'Logo-明亮模式',
  home_baner_logo:'轮播图-Logo',
  home_baner_background_dark:'轮播背景图-黑暗模式',
  home_baner_content_1:'轮播图-文字1',
  home_baner_content_2:'轮播图-文字2',
  home_baner_content_3:'轮播图-文字3',
  home_baner_content_4:'轮播图-文字4',
  home_baner_content_5:'轮播图-文字5',
  home_baner_button2_route:'按钮1（免费体验）跳转路径',
  home_baner_button2_hidden:'隐藏按钮2（0基础部署按钮）',
  slider_wechat_official_qrcode:'侧面滑动栏微信公众号',
  slider_contact_email:'侧面滑动栏联系邮箱',
  service_url:'客服地址',
  home_foot_beian_gongan:'公安备案号',
  home_foot_beian_icp:'ICP备案号',
  mainSlider_serviceCard_show:'主侧边栏-显示客服卡片',
  website_title:'网站标题',
  home_navigation:'自定义菜单栏'
}
console.log(Object.keys(appPageContent.value))
definePageMeta({
  //布局
  layout: 'landing-layout',
  validate: async (route: any) => {
    return true
  }
})

/**
 * 获取页面和运营参数配置
 */
const getContentAndOperationConfig = async () => {
  const data = await Client_GET('/content') as APPSetting
  if(data){
    appPageContent.value = data.page_content
    operationConfig.value = data.operation_config
  }
}
onMounted(async () => {
  await getContentAndOperationConfig()
})

/**
 * 保存页面显示
 */
const handleSaveContents = async () => {
  // if(!isCommercial.value){
  //   appPageContent.value.mainSlider_serviceCard_show=true
  //   appPageContent.value.home_navigation=""
  //   useSnackbarStore().showWarningMessage('社区版不支持修改自定义导航和隐藏认证信息')
  // }
  await Client_PATCH('/content', {
    page_content: appPageContent.value,
  })
  useSnackbarStore().showSuccessMessage('保存成功')
}
/**
 * 保存运营配置
 */
const handleSaveOperationConfig = async () => {
  await Client_PATCH('/content', {operation_config:operationConfig.value})
  useSnackbarStore().showSuccessMessage('保存成功')
}

const stringfy=(item:any)=>{
  return JSON.stringify(item)
}
const openNewWindow=()=>{
  window.open('https://pictogrammers.com/library/mdi/')
}


</script>

<template>
  <v-container>
    <v-card title="运营设置" class="mb-4">
        <v-card-text>
          <v-row>
            <v-col cols="12" md="6" v-for="(item,key) in operationConfig" :key="key">
              <v-label class="font-weight-bold ma-2">{{  data[key]?data[key]:key }}</v-label>
              <v-text-field v-if="key!=='enableMultiTask'" v-model="operationConfig[key]" variant="outlined"
                            density="compact"></v-text-field>

              <v-switch v-else v-model="operationConfig[key]" :label="operationConfig[key]?'启用多任务':'关闭多任务'"></v-switch>
            </v-col>
          </v-row>
        </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" class="ma-2" prepend-icon="mdi-content-save" variant="flat" @click="handleSaveOperationConfig">
          保存
        </v-btn>
      </v-card-actions>
    </v-card>
    <v-card title="显示设置" prepend-icon="mdi-cog-outline">
      <v-card-text>
        <v-row>
          <v-col cols="12" md="6" v-for="(item,key) in appPageContent" :key="key">
            <v-label class="font-weight-bold ma-2">{{ data[key]?data[key]:key }}</v-label>

            <v-switch v-if="key==='home_baner_button2_hidden'"  v-model="appPageContent[key]" :label="appPageContent[key]?'隐藏':'显示'"></v-switch>
            <v-switch v-else-if="key==='mainSlider_serviceCard_show'"  v-model="appPageContent[key]" :label="appPageContent[key]?'显示':'隐藏'"></v-switch>
            <!--              对象-->
            <CodeEditDialog  :height="600" v-else-if="key==='home_navigation'" v-model="appPageContent[key]">
              <template v-slot:description>
                <v-label class="text-h6 font-weight-bold">填写说明</v-label>
                <p>
                  1、icon:
                  <span>点击</span>
                  <a @click="openNewWindow" class="font-weight-bold text-cyan-500 cursor-pointer">Material Design Icons
                  </a>
                  选择你喜欢的图标样式
                </p>
                <p>
                  2、title:
                  <span>菜单栏的显示内容</span>
                </p>
                <p>
                  3、route:
                  <span>点击跳转的路径,可以设置为自定以应用或者大模型路径</span>
                </p>
                <p>
                  4、value:
                  <span>多语言切换时key,需要用到多语言时，可以忽略设置</span>
                </p>

              </template>
            </CodeEditDialog>
            <v-text-field v-else  v-model="appPageContent[key]" variant="outlined"
                          density="compact"></v-text-field>
            <v-img v-if="appPageContent[key]?.toString().includes('http')" width="15%" :src="appPageContent[key]"></v-img>
          </v-col>
        </v-row>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" class="ma-4" prepend-icon="mdi-content-save" variant="flat" @click="handleSaveContents">
          保存
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>

</template>

<style scoped lang="scss">

</style>